import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Advanced/SSR Support" />

# SSR Support

The Next.js framework supports SSR, but the `Canvas` component shouldn't be rendered on the server.
_It won't crash the app, but it'd print a lot of noisy warnings (`useEffect`, etc.) on the server, though._

`pages/index.tsx`:
```tsx
import React from 'react';
import { Canvas } from 'reaflow';

const Page = () => (
  <div style={{position: 'relative', width: '100vw', height: '100vh'}}>
    <div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, 'backgroundColor': '#F5F5F5'}}>
      {
        // Don't render the Canvas on the server
        typeof window !== 'undefined' && (
          <Canvas
            maxWidth={800} // Use small canvas dimensions to make sure the nodes appear on screen immediately
            maxHeight={600}
            nodes={[
              {
                id: '1',
                text: '1'
              },
              {
                id: '2',
                text: '2'
              }
            ]}
            edges={[
              {
                id: '1-2',
                from: '1',
                to: '2'
              }
            ]}
          />
        )
      }
    </div>
  </div>
);

export default Page;
```
